<!-- 菜单页面：周菜谱安排 -->
<template>
  <view class="container">
		<view class="container-body">
			<view class="sidebar">
				<van-sidebar :active-key="activeDay" @change="onDayChange">
					<van-sidebar-item v-for="day in days" :key="day.id" :title="day.name">{{day.name}}</van-sidebar-item>
				</van-sidebar>
			</view>
			<view class="content">
				<view class="meal-section" v-for="meal in days[activeDay].subType" :key="meal.key">
					<view class="meal-type">{{ meal.name }}</view>
					<view class="meal-content">
						<view class="meal-item" v-for="item in meals[activeDay][meal.key]" :key="item.name">
							<van-image class="meal-item-image"  width="100"  height="100" radius="5" :src="item.image"/>
							<view class="meal-item-right">
								<view class="meal-item-text">{{ item.name }}</view>
								<view class="meal-item-reason">每周必点，营养均衡</view>
								<view class="meal-item-desc">下饭必备</view>
								<view class="meal-item-price">￥10.00</view>
							</view>
						</view> 
					</view>
				</view>
			</view>
		</view>
		<view class="container-footer">
			<van-button type="primary" size="small" plain @click="batchEdit">批量编辑</van-button>
			<van-button type="info" size="small" plain @click="generatePlan">一键生成</van-button>
		</view>
  </view>
</template>

<script setup>
	// import { defineComponent } from 'vue';
	import { ref, onMounted } from 'vue';
	
	const activeDay = ref(new Date().getDay() - 1); // 默认显示今天的菜单
	const days = ref([
		{ id: 0, sort: 0, name: '周一' , subType: [{ key: 'breakfast', name: '早餐' },	{ key: 'lunch', name: '午餐' },	{ key: 'dinner', name: '晚餐' }] },
		{ id: 1, sort: 1, name: '周二' , subType: [{ key: 'breakfast', name: '早餐' },	{ key: 'lunch', name: '午餐' },	{ key: 'dinner', name: '晚餐' }] },
		{ id: 2, sort: 2, name: '周三' , subType: [{ key: 'breakfast', name: '早餐' },	{ key: 'lunch', name: '午餐' },	{ key: 'dinner', name: '晚餐' }] },
		{ id: 3, sort: 3, name: '周四' , subType: [{ key: 'breakfast', name: '早餐' },	{ key: 'lunch', name: '午餐' },	{ key: 'dinner', name: '晚餐' }] },
		{ id: 4, sort: 4, name: '周五' , subType: [{ key: 'breakfast', name: '早餐' },	{ key: 'lunch', name: '午餐' },	{ key: 'dinner', name: '晚餐' }]},
		{ id: 5, sort: 5, name: '周六' , subType: [{ key: 'lunch', name: '午餐' },	{ key: 'dinner', name: '晚餐' }] },
		{ id: 6, sort: 6, name: '周日' , subType: [{ key: 'lunch', name: '午餐' },	{ key: 'dinner', name: '晚餐' }]}
	]);
	const meals = ref({
		0: { breakfast: [], lunch: [], dinner: [] },
		1: { breakfast: [], lunch: [], dinner: [] },
		2: { breakfast: [], lunch: [], dinner: [] },
		3: { breakfast: [], lunch: [], dinner: [] },
		4: { breakfast: [], lunch: [], dinner: [] },
		5: {
			breakfast: [
				{ name: '豆浆', image: '/static/images/recipe/laozhixia.png' },
				{ name: '油条', image: '/static/images/recipe/laozhixia.png' }
			],
			lunch: [{ name: '炒饭', image: '/static/images/recipe/laozhixia.png' }],
			dinner: [{ name: '饺子', image: '/static/images/recipe/laozhixia.png' }]
		},
		6: { breakfast: [], lunch: [], dinner: [] }
	});

	// 切换星期
	function onDayChange(event) {
		activeDay.value = event.detail;
		fetchMeals();
		// Fetch or update meals data based on the selected day
	}

	// 获取周菜单数据
	function fetchMeals() {
		// 这里可以添加获取菜单数据的逻辑
	}
	// 批量编辑
	function batchEdit() {
		console.log("批量编辑")
	}
	// 一键生成
	function generatePlan() {
		console.log("一键生成")
	}
	onMounted(() => {
		fetchMeals();
		meals.value[activeDay.value] = {
			breakfast: [{ name: '油条', image: '/static/images/recipe/laozhixia.png' }, { name: '豆浆', image: '/static/images/recipe/laozhixia.png' }, { name: '包子', image: '/static/images/recipe/laozhixia.png' }],
			lunch: [{ name: '炒饭', image: '/static/images/recipe/laozhixia.png' }],
			dinner: [{ name: '饺子', image: '/static/images/recipe/laozhixia.png' }]
		}
	});
</script>

<style scoped lang="scss">
.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	.container-body {
		display: flex;
		height: calc(100% - 40px);
		overflow:hidden;
		.sidebar {
				width: 20%;
				height: 100%;
			}
			.content {
				box-sizing: border-box;
				width: 80%;
				padding: 10px;
				height: 100%;
				overflow: auto;
				// .meal-section {
				// 	margin-bottom: 20px;
				// }
				.meal-type {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 10px;
				}
				.meal-content {
					display: flex;
					flex-flow: column wrap;
					flex: 1 1 100%;
					.meal-item {
						display: flex;
						flex-flow: row nowrap;
						flex: 1 1 100%;
						justify-content: space-between;
						padding: 10px 0;
						.meal-item-image {
							width: 40%;
						}
						.meal-item-right {
							display: flex;
							flex-flow: column wrap;
							justify-content: space-around;
							width: 60%;
							margin-bottom: 10px;
							.meal-item-text {
								font-size: 18px;
								font-weight: 700;
							}
							.meal-item-reason {
								// font-size: 1px;
								// font-weight: 700;
								color: #ffa500;
							}
							.meal-item-desc {
								color: #c5c5c5;
							}
							.meal-item-price {
								color: #e73e2b;
							}
						}
					}
				}
			}
	}
	.container-footer {
		position: fixed;
		bottom: 0;
		left: 0;
    display: inline-flex;
    justify-content: space-evenly;
    width: 100%;
    height: 40px;
    line-height: 40px;
		background-color: #f5f5f5;
	}
}
</style>